@import '../core/style/elevation';
@import '../../cdk/a11y/a11y';

$mat-chip-vertical-padding: 7px;
$mat-chip-horizontal-padding: 12px;
$mat-chip-remove-margin-before: 6px;
$mat-chip-remove-margin-after: -4px;

$mat-chips-chip-margin: 8px;

$mat-chip-input-width: 150px;
$mat-chip-input-margin: 3px;

.mat-chip-list-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
}

.mat-chip:not(.mat-basic-chip) {
  @include mat-elevation-transition;
  display: inline-flex;
  padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding;
  border-radius: $mat-chip-horizontal-padding * 2;
  align-items: center;
  cursor: default;

  // Apply a margin to adjacent sibling chips.
  & + & {
    margin: 0 0 0 $mat-chips-chip-margin;

    [dir='rtl'] & {
      margin: 0 $mat-chips-chip-margin 0 0;
    }
  }

  .mat-form-field-prefix & {
    &:last-child {
      margin-right: $mat-chips-chip-margin;
    }

    [dir='rtl'] &:last-child {
      margin-left: $mat-chips-chip-margin;
    }
  }

  .mat-chip-remove.mat-icon {
    width: 1em;
    height: 1em;
  }

  &:focus {
    @include mat-elevation(3);
    outline: none;
  }

  @include cdk-high-contrast {
    outline: solid 1px;
  }
}

.mat-chip-list-stacked .mat-chip-list-wrapper {
  display: block;

  .mat-chip:not(.mat-basic-chip) {
    display: block;
    margin: 0;
    margin-bottom: $mat-chips-chip-margin;

    [dir='rtl'] & {
      margin: 0;
      margin-bottom: $mat-chips-chip-margin;
    }

    &:last-child, [dir='rtl'] &:last-child {
      margin-bottom: 0;
    }
  }
}

.mat-form-field-prefix .mat-chip-list-wrapper {
  margin-bottom: $mat-chips-chip-margin;
}

.mat-chip-remove {
  margin-right: $mat-chip-remove-margin-after;
  margin-left: $mat-chip-remove-margin-before;
  cursor: pointer;

  [dir='rtl'] & {
    margin-right: $mat-chip-remove-margin-before;
    margin-left: $mat-chip-remove-margin-after;
  }
}

input.mat-chip-input {
  width: $mat-chip-input-width;
  margin: $mat-chip-input-margin;
  flex: 1 0 $mat-chip-input-width;
}
